<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./lib/bootstrap.css">
</head>
<body>
  <div style='padding: 10px 30px'>
    <!-- 评论面板 -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">发表评论</h3>
      </div>
      <form class="panel-body" id="formAddCmt">
        <div>评论人：</div>
        <input type="text" class="form-control" name="username" autocomplete="off" />
        <div>评论内容：</div>
        <textarea class="form-control" name="content"></textarea>
        <button type="submit" class="btn btn-primary">发表评论</button>
      </form>
    </div>
    <!-- 评论列表 -->
    <ul class="list-group" id="cmt-list">
      <!-- <li class="list-group-item">
        <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
        <span class="badge" style="background-color: #5BC0DE;">评论人：</span>
        Item 1
      </li> -->
    </ul>
  </div>
  <script type="text/javascript" src="./lib/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      // 加载评论列表数据
      function loadCommentList () {
        $.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {
          if (res.status === 200) {
            // 获取服务器评论列表
            var list = res.data
            // 渲染评论列表
            var commonts = []
            list.forEach(function (item) {
              // ctag表示其中一条评论
              var ctag = `
                <li class="list-group-item">
                  <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
                  <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
                  ${item.content}
                </li>
              `
              commonts.push(ctag)
            })
            // 把列表内容追加到页面
            $('#cmt-list').html(commonts.join(''))
          }
        })
      }
      loadCommentList()
      // 发表评论
      $('#formAddCmt').submit(function (e) {
        // 阻止表单的默认提交行为
        e.preventDefault()
        // 获取表单数据
        var formData = $(this).serialize()
        // 调用接口发表评论
        $.post('http://www.liulongbin.top:3006/api/addcmt', formData, function (res) {
          if (res.status === 201) {
            // 发表评论称,刷新评论列表
            loadCommentList()
          }
        })

        console.log('submit')
      })
    })
  </script>
</body>
</html>